<template>
  <div class="addbusketDetail">
    <div class="type">
      <div class="gray">选择规格：</div>
      <div class="list">
        <div
          :key="item.id"
          v-for="(item, index) in guige"
          class="item"
          :class="choseGuige.id == item.id ? 'active' : ''"
          @click="choseGuige = item"
        >
          {{ item.title }}
        </div>
      </div>
    </div>
    <div class="detail">
      <div
        v-for="(item, index) in choseGuige.skuList"
        class="item"
        :key="item.id"
      >
        <span class="gray">{{ item.name }}:</span>
        <span class="value">{{ item.value }}</span>
      </div>
      <div class="item">
        <span class="gray">单价：{{ choseGuige.price }}</span>
      </div>
      <div class="item">
        <span class="gray"
          >库存：{{
            Number(choseGuige.showCount) > choseGuige.num
              ? choseGuige.num
              : "库存充足"
          }}</span
        >
      </div>
      <div class="item">
        <span class="value">起领量：{{ choseGuige.beginCount }}</span>
      </div>
    </div>
    <div class="bottom">
      <uni-number-box
        :value="parseInt(choseGuige.beginCount)"
        :min="0"
        :step="parseInt(choseGuige.beginCount)"
      ></uni-number-box>
      <div class="keyMoney" v-if="showKeyMoney">
        个人余额：￥{{ accountBalance }}
        <div class="instro"></div>
      </div>
      <div class="btnwrap" @click="checkCar" v-if="showPrise">
        <div class="btn">加入篮中</div>
      </div>
    </div>
  </div>
</template>

<script>
import uniNumberBox from "@/components/numbox";
import { mapActions, mapMutations, mapState } from "vuex";
export default {
  props: {
    goodsId: {
      type: String,
      default: "",
    },
    storeId: {
      type: String,
      default: "",
    },
    showKeyMoney: {
      type: Boolean,
      default: true,
    },
  },
  components: { uniNumberBox },
  mounted() {
	  console.log("mounted")
    this.init();
  },
  data() {
    return {
      checkResult: false,
      carPrice: 0,
      showPrise: true,
      goodsDetail: {},
      choseGuige: {},
      guige: [],
     // goodsNumber: 0,
    };
  },
  computed: {
    ...mapState({
      busket: (state) => state.busket,
      accountBalance: (state) => state.accountBalance, //个人余额
      departBalance: (state) => state.departBalance,  //部门余额
    }),
  },
  methods: {
    ...mapMutations(["updateBusket"]),
    // monitorNumber(e) {
		
	//   this.goodsNumber = this.choseGuige.beginCount;
	//   console.log("计算goodsNumber",this.goodsNumber)
    //   if (e == 0) {
    //     this.showPrise = false;
    //   } else {
    //     this.showPrise = true;
    //   }
    // },

    //加入购物篮
    addBusket() {
	  let busket = [...this.busket];
      if (busket.length) {
        let arr = busket;
        for (let i = 0; i < arr.length; i++) {
          let item = arr[i];
          if (item.id == this.goodsDetail.id) {
			  console.log(1)
            if (item.choseGuige.id == this.choseGuige.id) {
				console.log(2)
              //加入购物车默认选中
			  item.selected = true;
			  item.goodsNumber =Number(this.choseGuige.beginCount);
             // let count = item.goodsNumber + this.goodsNumber;
             // item.goodsNumber =count > this.choseGuige.num ? this.choseGuige.num : count;
			  busket[i] = item;
			 
            } else {
				console.log(3)
              busket.push({
                ...this.goodsDetail,
                goodsNumber: Number(this.choseGuige.beginCount),
                choseGuige: this.choseGuige,
                selected: true,
			  });
		
            }
            this.updateBusket(busket);
           break;
          } else {
            if (i == busket.length - 1) {
				console.log(4)
              busket.push({
                ...this.goodsDetail,
                selected: true,
                goodsNumber: Number(this.choseGuige.beginCount),
                choseGuige: this.choseGuige,
              });
              this.updateBusket(busket);
            }
          }
        }
      } else {
		  console.log(5)
        this.updateBusket([
          {
            ...this.goodsDetail,
            selected: true,
            goodsNumber: Number(this.choseGuige.beginCount),
            choseGuige: this.choseGuige,
          },
        ]);
      }
	  this.$emit("func");
	   this.$Message.success("加入成功");
    },

    // initCarPrice() {
    //   this.carPrice = 0;
    //   if (this.busket.length != 0) {
	// 	this.busket.forEach(item => {
	// 		 this.carPrice += item.choseGuige.price * item.goodsNumber;
	// 	});
    //     this.carPrice =  this.carPrice.toFixed(2);
    //   }
    // },
    init() {
		
      this.getGoodsDetail();
    },
    //获取商品详情
    getGoodsDetail() {
		console.log("获取商品详情goodsId:",this.goodsId)
      this.axios
        .request({
          url: "/api/app/v1/goods/getGoodsDetail",
          params: { goodsId: this.goodsId, storeId: this.storeId },
          method: "get",
        })
        .then((res) => {
          if (res.success) {
            this.goodsDetail = res.result;
            if (res.result.skuList) {
              this.guige = res.result.skuList;
			  this.choseGuige = res.result.skuList[0];
			  this.goodsNumber = Number(this.choseGuige.beginCount)
            }
          }
        });
    },
    //检验加入购物车的数量是否合法
    checkCar() {
      let that = this;
      this.axios
        .request({
          url: "/api/app/v1/order/checkSingleGoods",
          params: {
            goodsId: this.goodsId,
            storeId: this.storeId,
            skuId: this.choseGuige.id,
            num: this.choseGuige.beginCount,
          },
          method: "get",
        })
        .then((res) => {
          if (res.success) {
            this.checkResult = true;
            that.addBusket();
          } else {
            this.$Message.error(res.message);
          }
        });
    },
  },
};
</script>

<style lang="less" scoped>
@import "~@/assets/css/public.less";
.addbusketDetail {
  padding: 15px;
  font-size: 14px;
  color: #333;
  background: #fff;

  .gray {
    color: #666;
  }
  .type {
    .list {
      display: flex;
      flex-wrap: wrap;
      padding-top: 20px;
      .item {
        padding: 6px 15px;
        border-radius: 30px;
        margin-right: 15px;
        margin-bottom: 15px;
        border: 1px solid #ccc;
        white-space: nowrap;
        cursor: pointer;
        &:hover {
          border: 1px solid #007cf9;
          color: #007cf9;
        }
        &.active {
          background: #007cf9;
          border: 1px solid #007cf9;
          color: #fff;
        }
      }
    }
  }
  .detail {
    display: flex;
    flex-wrap: wrap;
    .item {
      width: 50%;
      padding-bottom: 20px;
    }
  }
  .bottom {
    display: flex;
    padding-top: 20px;
    align-items: center;
    .keyMoney {
      margin-left: 5px;
      display: flex;
      align-items: center;
    }
    .instro {
      margin-left: 5px;
      width: 14px;
      height: 14px;
      .bg-image("~@/assets/img/说明");
    }
    .btnwrap {
      flex: 1;
      .btn {
        cursor: pointer;
        float: right;
        width: 100px;
        height: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #007cf9;
        border-radius: 4px;
        border-radius: 4px;
        color: #fff;
        text-align: center;
      }
    }
  }
}
</style>